<template>
    <pre style="padding-left: 0">  
        
        指令是带有 v- 前缀的特殊 attribute。 
        官网地址：https://cn.vuejs.org/api/built-in-directives.html#v-html
        博客：https://blog.csdn.net/Sean_0819/article/details/130189597
      <code class="language-Markup  line-numbers">
        <strong>属性绑定和样式绑定指令：动态的绑定一个或多个 attribute，也可以是组件的 prop；缩写：: 或者 . (当使用 .prop 修饰符)</strong>
            &lt;!-- 绑定 attribute --&gt
            &lt;img v-bind:src="imageSrc" /&gt

            &lt;!-- 动态 attribute 名 --&gt
            &lt;button v-bind:[key]="value"&gt&lt;/button&gt

            &lt;!-- 缩写 --&gt
            &lt;img :src="imageSrc" /&gt

            &lt;!-- 缩写形式的动态 attribute 名 --&gt
            &lt;button :[key]="value"&gt&lt;/button&gt

            &lt;!-- 内联字符串拼接 --&gt
            &lt;img :src="'/path/to/images/' + fileName" /&gt

            &lt;!-- class 绑定 --&gt
            &lt;div :class="{ red: isRed }"&gt&lt;/div&gt
            &lt;div :class="[classA, classB]"&gt&lt;/div&gt
            &lt;div :class="[classA, { classB: isB, classC: isC }]"&gt&lt;/div&gt

            &lt;!-- style 绑定 --&gt
            &lt;div :style="{ fontSize: size + 'px' }"&gt&lt;/div&gt
            &lt;div :style="[styleObjectA, styleObjectB]"&gt&lt;/div&gt

            &lt;!-- 绑定对象形式的 attribute --&gt
            &lt;div v-bind="{ id: someProp, 'other-attr': otherProp }"&gt&lt;/div&gt

            &lt;!-- prop 绑定。“prop” 必须在子组件中已声明。 --&gt
            &lt;MyComponent :prop="someThing" /&gt

            &lt;!-- 传递子父组件共有的 prop --&gt
            &lt;MyComponent v-bind="$props" /&gt

            &lt;!-- XLink --&gt
            &lt;svg&gt&lt;a :xlink:special="foo"&gt&lt;/a&gt&lt;/svg&gt
  
      </code>
    </pre>
  </template>
  <script lang="ts" setup> 
  import { onMounted } from "vue";
  import Prism from "prismjs";
  onMounted(()=>{
    Prism.highlightAll();
  })
   
  </script>